function querySelector() {
    //取得body 元素
    var body = document.querySelector("body");
    //取得ID 为"myDiv"的元素
    var myDiv = document.querySelector("#myDiv");
    //取得类为"selected"的第一个元素
    var selected = document.querySelector(".selected");
    //取得类为"button"的第一个图像元素
    var img = document.body.querySelector("img.button");
}

function querySelectorAll() {
    //取得某<div>中的所有<em>元素（类似于getElementsByTagName("em")）
    var ems = document.getElementById("myDiv").querySelectorAll("em");
    //取得类为"selected"的所有元素
    var selecteds = document.querySelectorAll(".selected");
    //取得所有<p>元素中的所有<strong>元素
    var strongs = document.querySelectorAll("p strong");

    var i, len, strong;
    for (i = 0, len = strongs.length; i < len; i++) {
        strong = strongs[i]; //或者strongs.item(i)
        strong.className = "important";
    }
}

function matchesSelector(element, selector) {
    if (element.matchesSelector) {
        return element.matchesSelector(selector);
    } else if (element.msMatchesSelector) {
        return element.msMatchesSelector(selector);
    } else if (element.mozMatchesSelector) {
        return element.mozMatchesSelector(selector);
    } else if (element.webkitMatchesSelector) {
        return element.webkitMatchesSelector(selector);
    } else {
        throw new Error("Not supported.");
    }
}

function matchesSelectorTest() {
    if (matchesSelector(document.body, "body.page1")) {
        //执行操作
    }
}

//元素遍历
function elementTest() {
    //Element Traversal API 为DOM元素添加了以下5 个属性:
    //  childElementCount：返回子元素（不包括文本节点和注释）的个数。
    //  firstElementChild：指向第一个子元素；firstChild 的元素版。
    //  lastElementChild：指向最后一个子元素；lastChild 的元素版。
    //  previousElementSibling：指向前一个同辈元素；previousSibling 的元素版。
    //  nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。
    var i,
        len,
        child = element.firstChild;
    while (child != element.lastChild) {
        if (child.nodeType == 1) { //检查是不是元素
            processChild(child);
        }
        child = child.nextSibling;
    }
    //而使用Element Traversal 新增的元素，代码会更简洁
    var i,
        len,
        child = element.firstElementChild;
    while (child != element.lastElementChild) {
        processChild(child); //已知其是元素
        child = child.nextElementSibling;
    }
}

function classList() {
    //取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
    var allCurrentUsernames = document.getElementsByClassName("username current");
    //取得ID 为"myDiv"的元素中带有类名"selected"的所有元素
    var selected = document.getElementById("myDiv").getElementsByClassName("selected");


    //首先，取得类名字符串并拆分成数组
    var classNames = div.className.split(/\s+/);
    //找到要删的类名
    var pos = -1,
        i,
        len;
    for (i = 0, len = classNames.length; i < len; i++) {
        if (classNames[i] === "user") {
            pos = i;
            break;
        }
    }
    //删除类名
    classNames.splice(i, 1);
    //把剩下的类名拼成字符串并重新设置
    div.className = classNames.join(" ");

    //前面那么多行代码用下面这一行代码
    div.classList.remove("user");
}

function compatModeTest() {
    if (document.compatMode === "CSS1Compat") {
        alert("Standards mode");
    } else {
        alert("Quirks mode");
    }
}

function charsetTest() {
    alert(document.charset);
}

//自定义数据属性
function dataTest() {
    var div = document.getElementById("myDiv");
    //取得自定义属性的值
    var appId = div.dataset.appId;
    var myName = div.dataset.myname;
    //设置值
    div.dataset.appId = 23456;
    div.dataset.myname = "Bobby";
    //有没有"myname"值呢？
    if (div.dataset.myname) {
        alert("Hello, " + div.dataset.myname);
    }
}

function innerHTMLTest() {
    var div = document.getElementById("content");
    console.log(div.innerHTML);
    div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>";
}

function outerHTMLTest() {
    var div = document.getElementById("content");
    console.log(div.outerHTML);
    div.outerHTML = "<p>This is a paragraph.</p>";
}

function insertAdjacentHTMLTest() {
    var element = document.getElementById("content");
    //作为前一个同辈元素插入
    element.insertAdjacentHTML("beforebegin", "<p>beforeBegin</p>");
    //作为第一个子元素插入
    element.insertAdjacentHTML("afterbegin", "<p>afterBegin</p>");
    //作为最后一个子元素插入
    element.insertAdjacentHTML("beforeend", "<p>beforeEnd</p>");
    //作为后一个同辈元素插入
    element.insertAdjacentHTML("afterend", "<p>afterEnd</p>");
}

var flag = true;

function scrollIntoViewTest() {
    var contentDiv = document.getElementById("content");
    var scrollDiv = document.getElementById("scrollDiv");
    //让元素可见
    if (flag) {
        flag = false;
        contentDiv.scrollIntoView();
    } else {
        flag = true;
        scrollDiv.scrollIntoView();
    }
}

function contains(refNode, otherNode) {
    if (typeof refNode.contains === "function" && (!client.engine.webkit || client.engine.webkit >= 522)) {
        return refNode.contains(otherNode);
    } else if (typeof refNode.compareDocumentPosition === "function") {
        return !!(refNode.compareDocumentPosition(otherNode) & 16);
    } else {
        var node = otherNode.parentNode;
        do {
            if (node === refNode) {
                return true;
            } else {
                node = node.parentNode;
            }
        } while (node !== null);
        return false;
    }
}

function getInnerText(element) {
    return (typeof element.textContent === "string") ?
        element.textContent : element.innerText;
}

function setInnerText(element, text) {
    if (typeof element.textContent === "string") {
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}

function scroll() {
    //将页面主体滚动5 行
    document.body.scrollByLines(5);
    //在当前元素不可见的时候，让它进入浏览器的视口
    document.images[0].scrollIntoViewIfNeeded();
//将页面主体往回滚动1 页
    document.body.scrollByPages(-1);
}